<!-- 编辑弹窗 -->
<template>
  <ele-modal
    width="520px"
    :visible="visible"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    :title="isUpdate ? '修改菜单' : '添加菜单'"
    @update:visible="updateVisible"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="92px">
      <el-row :gutter="24">
        <el-col :md="24" :sm="24">
          <el-form-item label="上级菜单:">
             <el-input v-model="form.parentTitle" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :md="24" :sm="24">
          <el-form-item label="菜单名称:" prop="title">
            <el-input  v-model="form.title" placeholder="请输入菜单名称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :md="24" :sm="24">
          <el-form-item label="菜单地址:" prop="path">
            <el-input  v-model="form.path" placeholder="请输入菜单地址" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :md="24" :sm="24" >
          <el-form-item label="菜单类型:" prop="menuType">
            <el-select v-model="form.menuType" clearable placeholder="请输入菜单类型"  style="width: 100%;">
              <el-option v-for="(item, index) in menuTypeNums" :key="index" :label="item.Value" :value="item.Key"  />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
       <el-row :gutter="24">
        <el-col :md="24" :sm="24" >
          <el-form-item label="菜单索引:" >
            <el-input-number  v-model="form.orderIndex" clearable placeholder="请输入菜单索引" style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :md="24" :sm="24" >
          <el-form-item label="是否展示:" prop="hide">
            <el-select v-model="form.hide" placeholder="请选择是否展示菜单"  style="width: 100%;">
              <el-option v-for="(item, index) in isShowNums" :key="index" :label="item.Value" :value="item.Key"  />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :md="24" :sm="24" >
          <el-form-item label="菜单图标:">
            <ele-icon-picker v-model="form.icon"  placeholder="请选择菜单图标"  :disabled="form.menuType === 1"  style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :md="24" :sm="24" >
          <el-form-item label="权限标识:" >
            <!-- <el-checkbox-group v-model="form.checkBtns">
              <el-checkbox   v-for="(item, index) in this.btnEnums" :key="index" :label="JSON.stringify(item) " >{{item.Value }}</el-checkbox>
            </el-checkbox-group>   -->
            <el-select v-model="form.perms"  placeholder="请选择权限标识" style="width:100%" clearable filterable >
                <el-option v-for="(item, index) in btnEnums" :key="index" :label="item.Value" :value="item.Key"  />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">
        保存
      </el-button>
    </div>
  </ele-modal>
</template>

<script>
  import { EleIconPicker } from 'ele-admin';
  import { QueryMenuTypeEnum,QueryIsShowMenu } from '@/api/enummanger';
  import { AddMenu, UpdateMenu,GetAllPerms } from '@/api/systemmanager/menumanager';

  const DEFAULT_FORM = {
    id: '',
    parentId: '',
    parentTitle :'',
    title: '',
    menuType: 0,
    icon: '',
    path: '',
    component: '',
    hide: 0,
    hideDesc: '',
    orderIndex:0,
    hideFooter:'',
    type:'',
    perms:'',
  };

  export default {
    name: 'MenuEdit',
    components: { EleIconPicker },
    props: {
      // 弹窗是否打开
      visible: Boolean,
      // 修改回显的数据
      data: Object,
    },
    data() {
      return {
        // 表单数据
        form: { ...DEFAULT_FORM },
        // 表单验证规则
        rules: {
          title: [{ required: true, message: '请输入菜单名称',trigger: 'blur'}],
          path: [{required: true,message: '请输入菜单路径',trigger: 'blur'}],
          hide: [{required: true,message: '请输选择是否展示',trigger: 'blur'}],
          menuType: [{required: true,message: '请输入菜单类型',trigger: 'blur'}],
          meta: [
            {
              trigger: 'blur',
              validator: (rule, value, callback) => {
                if (value) {
                  const error = new Error('请输入正确的JSON格式');
                  try {
                    const obj = JSON.parse(value);
                    if (typeof obj !== 'object' || obj === null) {
                      callback(error);
                      return;
                    }
                  } catch (e) {
                    callback(error);
                    return;
                  }
                }
                callback();
              }
            }
          ]
        },
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,
        //菜单类型
        menuTypeNums:[],
        //是否展示菜单
        isShowNums:[],
        //按钮枚举数据
        btnEnums:[],
      };
    },

    //初始化数据
    created(){
      this.initData();
    },

    methods: {
      /* 初始化数据 */
      async initData(){
        let btnTypeEnums = await GetAllPerms();
        let isShowNums = await QueryIsShowMenu();
        let menuTypes = await QueryMenuTypeEnum();
        //菜单类型
        menuTypes.map(m=>{
            this.menuTypeNums.push({Key:m.Key,Value:m.Value});
        });
        //是否展示菜单
        isShowNums.map(m=>{
            this.isShowNums.push({Key:m.Key,Value:m.Value});
        });
        //按钮数据
        btnTypeEnums.map(m=>{
          this.btnEnums.push({Key:m.Value,Value:m.Value});
        });
      },

      /* 保存编辑 */
      save() {
        //校验必填信息
        this.$refs['form'].validate((valid) => {
          if (!valid) {return false;}
          let menu = {
            id:this.form.id,
            type:this.form.type,
            hide:this.form.hide,
            perms:this.form.perms,
            modelImg:this.form.icon,
            moduleUrl:this.form.path,
            menuType:this.form.menuType,
            moduleTitle:this.form.title,
            parentId:this.form.parentId,
            orderIndex:this.form.orderIndex,
            hideFooter:this.form.hideFooter,
            parentTitle:this.form.parentTitle,
          }

          this.loading = true;
          const saveOrUpdate = this.isUpdate ? UpdateMenu : AddMenu;
          saveOrUpdate(menu)
            .then((msg) => {
              this.loading = false;
              this.$message.success(msg);
              this.updateVisible(false);
              // 回调父组件方法
              this.$emit('done');
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        });
      },

      /* 更新visible */
      updateVisible(value) {
        //更新父组件中的visible的值
        this.$emit('update:visible', value);
      },

      /* menuType选择改变 */
      onMenuTypeChange() {
        if (this.form.menuType === 0) {
          this.form.authority = null;
        } else {
          this.form.openType = 0;
          this.form.icon = null;
          this.form.path = null;
          this.form.component = null;
          this.form.hide = 0;
        }
      },
    },
    /* 监听visible属性变化 */
    watch: {
      visible(visible) {
        if (visible) {
          if (this.data && this.data.id) {
            //赋值this.form
            this.form = { ...DEFAULT_FORM };
            this.$util.assignObject(this.form, {...this.data});
            this.isUpdate =  this.data.id !=null && this.data.id !=undefined;
          } else {
            this.isUpdate = false;
            this.form.id='';
            this.form.icon='';
            this.form.path='';
            this.form.title='';
            this.form.menuType='';
            this.form.orderIndex='';
            this.form.hideFooter=0;
            this.form.type=this.data.type;
            this.form.parentId = this.data.parentId;
            this.form.parentTitle = this.data.parentTitle;
          }
        } else {
          //移除校验结果并重置字段
          // this.$refs['form'].resetFields();
          //移除校验结果
         
          this.$refs['form'].clearValidate();
          this.form = { ...DEFAULT_FORM };
          if(this.data){
            this.form.parentId = this.data.parentId;
            this.form.parentTitle = this.data.parentTitle;
            this.isUpdate =  this.data.id !=null && this.data.id !=undefined;
          }
        }
      }
    }
  };
</script>
